<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.2");
	google.load("jqueryui", "1.7.2");
</script>
<script src="../lib/jquery.metadata.js"></script>
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->
<script src="../jquery.wireable.js"></script>
<style type="text/css">

body {
	font-family: arial, sans-serif;
}

.draggable h3 {
	margin: 0;
	padding: 0 .5em;
	border-bottom: 1px solid #999;
	background: #ccc;
	cursor: move;
}

.draggable {
	position: absolute;
	z-index: 100;
	border-width: 1px;
	border-style: solid;
	width: 5em;
	background: #fff;
	opacity: .9;
	-moz-opacity: .9;
	filter: alpha(opacity = 90);
}

#a { top: 100px; left: 100px; }
#b { top: 150px; left: 150px; }
#c { top: 200px; left: 200px; }
#d { top: 150px; left: 250px; }
#e { top: 100px; left: 300px; }
#f { top: 200px; left: 350px; }
#g { top: 150px; left: 400px; }

.terminal, .source, .sink {
	display: inline;
	font-weight: bold;
	color: #00f;
	cursor: pointer;
}

.terminal.ui-state-active, .source.ui-state-active, .sink.ui-state-active {
	color: #f00;
}

.terminal.ui-state-hover, .source.ui-state-hover, .sink.ui-state-hover {
	color: #0f0;
}

.wired {
	color: #ff0;
}

</style>
</head>
<body>

<div id="a" class="draggable">
	<h3>A</h3>
	<div id="a-t" class="terminal {source:{color:'#ff0',borderColor:'#990',sourceAngle:270},sink:{color:'#f0f',borderColor:'#909',sinkAngle:90}}">O</div>
</div>

<div id="b" class="draggable">
	<h3>B</h3>
	<div id="b-t" class="terminal">O</div>
</div>

<div id="c" class="draggable">
	<h3>C</h3>
	<div id="c-t" class="terminal">O</div>
</div>

<div id="d" class="draggable">
	<h3>D</h3>
	<div id="d-t" class="source {sourceAngle:0}">O</div>
</div>

<div id="e" class="draggable">
	<h3>E</h3>
	<div id="e-t" class="sink {sinkAngle:180}">O</div>
</div>

<div id="f" class="draggable">
	<h3>F</h3>
	<div id="f-t" class="terminal">O</div>
</div>

<div id="g" class="draggable">
	<h3>G</h3>
	<div id="g-t" class="terminal">O</div>
</div>



<script type="text/javascript">
	google.setOnLoadCallback(function() {
		$('.draggable').draggable({handle:'h3'});

		$('.terminal').wireable();

		$('.source').wireable({
				target:'.sink',
				color:'#f00',
				width: 1,
				borderColor:'#000',
				borderWidth: 2.5
			})
			.bind('wiring', function(event){
				if (!confirm('allow the wire?'))
					event.preventDefault();
			});

		// automatically wire some up
		$.wire('#f-t', '#g-t');
		$.wire('#a-t', '#c-t');
		$.wire('#b-t', '#a-t');

		// can't unwire a-b because it's wired b-a
		$.unwire('#a-t', '#b-t');

		// this one will be removed
		$.unwire('#a-t', '#c-t');


	});
</script>
</body>
</html>
